<template>
	<view>
		<u-sticky>
			<view class="top">
				<u-subsection bgColor="#EFEFEF" height="80" fontSize="36" buttonColor="#FB683D" :current="current"
					inactive-color="#333333" active-color="#FFFFFF" :list="list1" @change="change"></u-subsection>
			</view>
		</u-sticky>
		<view class="content">
			<view class="title"></view>
			<view v-if="list.length>0">
				<view class="list" v-for="(item,index) in list" :key="index">
					<view class="detail">
						<view class="head">
							<image :src="img_pre+item.fang_manor_log" mode=""></image>
						</view>
						<view class="user">
							<view class="view">
								<view class="name">
									当前价值
								</view>
								<view class="text font" style="color: #F46813;">
									{{item.price}} <text> Fmb</text>
								</view>
							</view>
							<view class="view">
								<view class="name">

									蜂巢类型
								</view>
								<view class="text">
									{{item.title}}
								</view>
							</view>
							<view class="view">
								<view class="name">
									抢拍时间
								</view>
								<view class="time">
									{{item.time}}
								</view>
							</view>
						</view>
						<view v-if="item.type=='aaa'" class="icon a4">
							<view></view> 自动取消
						</view>
						<view v-if="item.type=='aaa'" class="icon a6">
							<view></view> 申诉完成
						</view>
						<view v-if="item.type=='aaa'" class="icon a5">
							<view></view> 自动完成
						</view>
						<view v-if="item.type=='CONFIRMED'" class="icon a1">
							<view></view> 新上传
						</view>
						<view v-if="item.type=='RESUBMITTED_VOUCHER'" class="icon a3">
							<view></view> 已申诉
						</view>
						<view v-if="item.identity=='BUYER'&&item.type=='APPEAL_BUYER'" class="icon a3">
							<view></view> 已申诉
						</view>
						<view v-if="item.identity=='SELLER'&&item.type=='APPEAL_SELLER'" class="icon a3">
							<view></view> 已申诉
						</view>
						<view v-if="item.identity=='SELLER'&&item.type=='REJECT'" class="icon a2">
							<view></view> 已驳回
						</view>
						<view v-if="item.identity=='BUYER'&&item.type=='REJECT'" class="icon a4">
							<view></view> 被驳回
						</view>
						<view v-if="item.identity=='BUYER'&&item.type=='APPEAL_SELLER'" class="icon a7">
							<view></view> 被申诉
						</view>
						<view v-if="item.identity=='SELLER'&&item.type=='APPEAL_BUYER'" class="icon a7">
							<view></view> 被申诉
						</view>
						<view v-if="item.identity=='SELLER'&&item.type=='WAIT_SUBMIT_VOUCHER'" class="icon a1">
							<view></view> 等待上传
						</view>
					</view>
					<view class="right">
						<view class="button" v-if="item.identity=='SELLER'&& item.type=='WAIT_SUBMIT_VOUCHER'"
							@click="showPop(item.type)">
							<image src="../static/u2.png" mode=""></image>
							<view class="name b4">
								等待上传
							</view>
						</view>
						<view class="button" v-if="item.identity=='BUYER'&& item.type=='WAIT_SUBMIT_VOUCHER'"
							@click="toPage('/pages/htmlB/voucher/index?orderno='+item.orderno)">
							<image src="../static/u2.png" mode=""></image>
							<view class="name b4">
								上传凭证
							</view>
						</view>
						<view class="button" v-if="item.identity=='SELLER'&& item.type=='SUBMITTED_VOUCHER'"
							@click="toPage('/pages/htmlB/voucher/voucher-b?orderno='+item.orderno+'&identity='+item.identity+'&type='+item.type)">
							<image src="../static/u1.png" mode=""></image>
							<view class="name b1">
								查看凭证
							</view>
						</view>
						<view class="button" v-if="item.identity=='SELLER'&& item.type=='RESUBMITTED_VOUCHER'"
							@click="toPage('/pages/htmlB/voucher/voucher-b?orderno='+item.orderno+'&identity='+item.identity+'&type='+item.type)">
							<image src="../static/u1.png" mode=""></image>
							<view class="name b1">
								查看凭证
							</view>
						</view>
						<view class="button" v-if="item.identity=='BUYER'&&item.type=='SUBMITTED_VOUCHER'"
							@click="toPage('/pages/htmlB/voucher/voucher-a?orderno='+item.orderno+'&identity='+item.identity+'&type='+item.type)">
							<image src="../static/u1.png" mode=""></image>
							<view class="name b1">
								查看凭证
							</view>
						</view>
						<view class="button" v-if="item.identity=='BUYER'&&item.type=='RESUBMITTED_VOUCHER'"
							@click="toPage('/pages/htmlB/voucher/voucher-a?orderno='+item.orderno+'&identity='+item.identity+'&type='+item.type)">
							<image src="../static/u1.png" mode=""></image>
							<view class="name b1">
								查看凭证
							</view>
						</view>
						<view class="button"
							@click="toPage('/pages/htmlB/voucher/voucher-b?orderno='+item.orderno+'&identity='+item.identity+'&type='+item.type)"
							v-if="item.identity=='SELLER'&&item.type=='REJECT'">
							<image src="../static/u1.png" mode=""></image>
							<view class="name b2">
								查看驳回
							</view>
						</view>
						<view class="button"
							@click="toPage('/pages/htmlB/voucher/voucher-a?orderno='+item.orderno+'&identity='+item.identity+'&type='+item.type)"
							v-if="item.identity=='BUYER'&&item.type=='REJECT'">
							<image src="../static/u1.png" mode=""></image>
							<view class="name b2">
								查看驳回
							</view>
						</view>
						<view class="button"
							@click="toPage('/pages/htmlB/voucher/voucher-a?orderno='+item.orderno+'&identity='+item.identity+'&type='+item.type)"
							v-if="item.identity=='BUYER'&&item.type=='APPEAL_SELLER'">
							<image src="../static/u1.png" mode=""></image>
							<view class="name b3">
								查看申诉
							</view>
						</view>
						<view class="button"
							@click="toPage('/pages/htmlB/voucher/voucher-b?orderno='+item.orderno+'&identity='+item.identity+'&type='+item.type)"
							v-if="item.identity=='SELLER'&&item.type=='APPEAL_SELLER'">
							<image src="../static/u1.png" mode=""></image>
							<view class="name b3">
								查看申诉
							</view>
						</view>
						<view class="button"
							@click="toPage('/pages/htmlB/voucher/voucher-b?orderno='+item.orderno+'&identity='+item.identity+'&type='+item.type)"
							v-if="item.identity=='SELLER'&&item.type=='APPEAL_BUYER'">
							<image src="../static/u1.png" mode=""></image>
							<view class="name b3">
								查看申诉
							</view>
						</view>
						<view class="button"
							@click="toPage('/pages/htmlB/voucher/voucher-a?orderno='+item.orderno+'&identity='+item.identity+'&type='+item.type)"
							v-if="item.identity=='BUYER'&&item.type=='APPEAL_BUYER'">
							<image src="../static/u1.png" mode=""></image>
							<view class="name b3">
								查看申诉
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="none" v-else>
				<view class="none-view">
					<image src="../../../static/image/none.png" class="none-image"></image>
					<view class="none-name">
						暂无相关数据~
					</view>
				</view>
			</view>
		</view>
		<view class="record" @click="toPage('record')">
			<image src="../static/record.png"></image>
			<view class="name">
				凭证记录
			</view>
		</view>
		<u-popup :closeable="true" close-icon-pos="top-left" borderRadius="10" mode="bottom" v-model="show">
			<view class="popup">
				<view class="_view">
					<view class="title">
						提示
					</view>
					<view class="cont">
						<view class="name">
							请等待兑换方上传凭证
						</view>
					</view>
				</view>
				<u-button type="success" :ripple="true" @click="show=false" class="button">我知道了</u-button>
				<view class="popup_top"></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				list1: ['上传凭证', '确认凭证'],
				background: {
					'background': '#FFFFFF'
				},
				title: "蜂巢",
				current: 0,
				active: 0,
				state: 0,
				type: 1,
				list: [],
				page: 1,
				show: false
			}
		},
		onLoad(option) {
			than = this;
			if (option.current) {
				than.current = option.current
			}
			/* 	than.post("api/kmb/lookMessage", {
					type: 'guozhong_count'
				}, function(data) {}) */
		},
		onShow() {
			switch (than.current) {
				case 0:
					than.listOfWaitVerify()
					break;
				case 1:
					than.listOfWaitSureVoucher()
					break;
				default:
					break;
			}
		},
		onReachBottom() {
			than.page++;
			switch (than.current) {
				case 0:
					than.listOfWaitVerify()
					break;
				case 1:
					than.listOfWaitSureVoucher()
					break;
				default:
					break;
			}
		},
		methods: {
			showPop(type) {
				if (type == 'WAIT_SUBMIT_VOUCHER') {
					than.show = true;
				}
			},
			change(index) {
				than.page = 1;
				than.current = index;
				switch (than.current) {
					case 0:
						than.listOfWaitVerify()
						break;
					case 1:
						than.listOfWaitSureVoucher()
						break;
					default:
						break;
				}
			},
			listOfWaitVerify() {
				than.post("api/trade/listOfWaitVerify", {
					page: than.page
				}, function(data) {
					if (than.page == 1) {
						than.list = data;
					} else {
						than.list = than.list.concat(data)
					}
				})
			},
			listOfWaitSureVoucher() {
				than.post("api/trade/listOfWaitSureVoucher", {
					page: than.page
				}, function(data) {
					if (than.page == 1) {
						than.list = data;
					} else {
						than.list = than.list.concat(data)
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #FAFAFA;
	}

	.popup {
		text-align: center;

		.popup_top {
			height: 30rpx;
		}

		._view {
			background: #FFFFFF;
			margin: 0 30rpx 30rpx;

			.title {
				padding-top: 20rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 38rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.code {
				text-align: center;
				padding-bottom: 40rpx;

				image {
					width: 81rpx;
					height: 81rpx;
				}
			}

			.cont {
				margin-top: 20rpx;
				height: 150rpx;
				text-align: center;
				font-size: 28rpx;
				color: #333333;

				.name {
					margin: 0 90rpx;
					height: 100rpx;
					line-height: 100rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}

				.name2 {
					margin: 0 20rpx;

					.t1 {

						font-size: 48rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FEC31D;
					}

					.t2 {

						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FEC31D;
					}
				}

				.contentType {
					padding: 24rpx 20rpx 63rpx;

					.active {
						border: 1rpx solid #FFC31E !important;

						.number {

							color: #FD3D28 !important;

							text {
								color: #FD3D28 !important;
							}
						}
					}

					.list {
						text-align: center;
						background: #F8F8F8;
						height: 263rpx;
						border-radius: 20rpx;
						position: relative;
						border: 1rpx solid #FFFFFF;

						.triangle {
							position: absolute;
							bottom: 0;
							right: 0;
							width: 0;
							height: 0;
							border-style: solid;
							border-width: 0 0 24rpx 24rpx;
							border-color: transparent transparent #FEC31D transparent;
						}

						image {
							margin-top: 38rpx;
							width: 78rpx;
							height: 80rpx;
						}

						.namex {
							line-height: 80rpx;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
						}

						.number {

							font-size: 36rpx;
							font-family: DINCond-Black;
							font-weight: 400;
							color: #666666;

							text {
								font-size: 28rpx;
								font-family: DIN Medium;
								font-weight: bold;
								color: #666666;
							}
						}
					}
				}


				.text {
					display: flex;
					align-items: center;
					justify-content: center;
					color: #F46813;
					font-size: 28rpx;

					text {
						margin: 0 10rpx;
						font-size: 32rpx;
					}
				}
			}
		}

		.button {
			border-radius: 40rpx;
			border: 0;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			width: 245rpx;
			height: 74rpx;
			background: #FB683D;
			border-radius: 20rpx;
			margin-bottom: 40rpx;
		}
	}

	.record {
		position: fixed;
		bottom: 70rpx;
		left: 40rpx;
		text-align: center;
		image{
			width: 74rpx;
			height: 74rpx;
		}
		.name{
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
		}
	}

	.tabs {
		height: 100rpx;
	}

	.top {
		padding: 36rpx;
		background: #FAFAFA;
	}


	.content {
		padding: 0 36rpx;
		margin-top: -100rpx;

		.title {
			height: 83rpx;
		}

		.list {

			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 24rpx 20rpx;
			margin-bottom: 24rpx;
			position: relative;

			image {
				width: 89rpx;
				height: 89rpx;
			}

			.a1 {
				background: #FCF4E8;
				color: #FF8652;

				view {
					background: #2FD09E;
				}
			}

			.a2 {
				background: #ECF2F8;
				color: #2765F9;

				view {
					background: #2765F9;
				}
			}

			.a3 {
				background: #FEF1F1;
				color: #333333;

				view {
					background: #FD3D28;
				}
			}

			.a4 {
				background: #EFEFEF;
				color: #333333;

				view {
					background: #171515;
				}
			}

			.a5 {
				background: #EFEFEF;
				color: #333333;

				view {
					background: #FFFFFF;
				}
			}

			.a6 {
				background: #EEF8EC;
				color: #1E9E72;

				view {
					background: #2FD09E;
				}
			}

			.a7 {
				background: #FCF5EA;
				color: #FF9C00;

				view {
					background: #FF9C00;
				}
			}

			.icon {
				position: absolute;
				top: 24rpx;
				height: 40rpx;
				right: 25rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				padding: 9rpx;
				display: flex;
				align-items: center;
				border-radius: 12rpx;

				view {
					margin-right: 12rpx;
					margin-left: 5rpx;
					width: 12rpx;
					height: 12rpx;
					background: #171515;
					border-radius: 50%;
				}
			}


			.detail {
				height: 206rpx;
				margin-left: 20rpx;
				display: flex;
				align-items: center;

				.head {
					width: 145.2rpx;
					height: 145.2rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.user {
					margin-left: 22rpx;

					.view {
						display: flex;
						align-items: center;
						height: 50rpx;

						.name {
							font-size: 30rpx;
							color: #666666;
							font-weight: bold;
						}

						.time {
							color: #999999;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							margin-left: 23rpx;
						}

						.text {
							margin-left: 23rpx;
							font-size: 28rpx;
							font-weight: bold;
							font-style: initial;

							text {
								font-size: 26rpx;
								margin-left: 10rpx;
							}
						}
					}

					.add {
						color: #F46813;
					}

					.sub {
						color: #1B1B1D;
					}
				}

			}

			.right {
				display: flex;
				align-items: center;


				.button {
					padding: 0 22rpx;
					margin-left: 35rpx;
					text-align: center;
					margin-left: auto;
					border: 1rpx solid #C7C7C7;
					border-radius: 30rpx;
					display: flex;
					align-items: center;

					.name {
						height: 60rpx;
						border-radius: 30rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					image {
						margin-right: 13rpx;
						width: 36rpx;
						height: 36rpx;
					}
				}
			}
		}
	}
</style>
